<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
		<meta content="utf-8" http-equiv="encoding">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="css/bootstrap.css" rel="stylesheet">
		<link href="css/bootstrap-responsive.css" rel="stylesheet">
		<link href="css/customize.css" rel="stylesheet">
		<title>Backbon learning</title>
		
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
		<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
		<script type="text/javascript" src="js/underscore.js"></script>
		<script type="text/javascript" src="js/backbone.js"></script>
		<script type="text/javascript" src="js/bootstrap.js"></script>
		
<script id="tab-template" type="text/x-jquery-tmpl"> 
	<div class="bs-docs-example">
		<ul id="myTab" class="nav nav-tabs">
		  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
		  <li><a href="#profile" data-toggle="tab">Profile</a></li>
		</ul>
		<div id="myTabContent" class="tab-content">
		</div>
	</div>
</script>
	</head>
	<body>
		<div class="container">
			<div class="row">
				<div class="span3 bs-docs-sidebar">
					<ul class="nav nav-list bs-docs-sidenav affix-top">
					  <li><a href="#overview"><i class="icon-chevron-right"></i> Overview</a></li>
					  <li><a href="#transitions"><i class="icon-chevron-right"></i> Transitions</a></li>
					  <li><a href="#modals"><i class="icon-chevron-right"></i> Modal</a></li>
					  <li><a href="#dropdowns"><i class="icon-chevron-right"></i> Dropdown</a></li>
					  <li><a href="#scrollspy"><i class="icon-chevron-right"></i> Scrollspy</a></li>
					  <li><a href="#tabs"><i class="icon-chevron-right"></i> Tab</a></li>
					  <li><a href="#tooltips"><i class="icon-chevron-right"></i> Tooltip</a></li>
					  <li><a href="#popovers"><i class="icon-chevron-right"></i> Popover</a></li>
					  <li><a href="#alerts"><i class="icon-chevron-right"></i> Alert</a></li>
					  <li><a href="#buttons"><i class="icon-chevron-right"></i> Button</a></li>
					  <li><a href="#collapse"><i class="icon-chevron-right"></i> Collapse</a></li>
					  <li><a href="#carousel"><i class="icon-chevron-right"></i> Carousel</a></li>
					  <li><a href="#typeahead"><i class="icon-chevron-right"></i> Typeahead</a></li>
					  <li><a href="#affix"><i class="icon-chevron-right"></i> Affix</a></li>
					</ul>
				</div>
				<div class="span9">
					<div class="bs-docs-grid">
						<div class="row-fluid show-grid">
						  <div class="span12">
							<button class="add">add1</button>
							This is the fucking beautiful header
						  </div>
						</div>
						<!-- body as reponsive span 8 collumn-->
						<div class="row-fluid show-grid">
							<div class="span8" id="left-main-container">
								<!-- Tab controller exmpale-->
								This suppose to be a tab controller
								<!-- End tab controller-->
							</div>
							<div class="span4">Side bar</div>
						</div>
						<!-- End body-->
						<div class="row-fluid show-grid">
						  <div class="span12">Footer</div>
						</div>
					</div>
				</div>	
			</div>	
		</div>
	</body>
</html> 
<script>
	var ItemView = Backbone.View.extend({
		tagName: 'button',
		className: 'add',
		events: {
		  'click': 'addItem'
		},
		initialize: function(){
			this.render();
		},
		render: function(){
			$(this.el).append('Add');
			$('#left-main-container').append($(this.el));
		},
		addItem: function(){
			alert(1);
		}
	})
	var item = new ItemView();
	var ListView = Backbone.View.extend({
		initialize: function(){
		  this.render();
		},
		render: function(){
			$('#tab-template').tmpl({}).appendTo('#left-main-container');
		},
	});

	var listView = new ListView();      
</script>
